<template>
  <div class="report-container-wrap">
    <px-scrollbar class="report-container">
      <div class="tab-bar">
        <CustomTabs :tabList="tabList" :activeName="activeName" @tabSelect="handelTabSelected" />
      </div>
      <px-form ref="formRef" :model="queryParams" :inline="true" class="custom-form-ui search-form">
        <px-form-item label="时间" prop="year">
          <px-date-picker v-model="queryParams.year" type="year" format="YYYY" value-format="YYYY" placeholder="请选择年份" />
        </px-form-item>
        <px-form-item label="厂区" prop="area">
          <px-select v-model="queryParams.area" placeholder="请选择厂区" clearable>
            <px-option v-for="item in areaList" :key="item.value" :label="item.name" :value="item.value" />
          </px-select>
        </px-form-item>
        <div class="search-form-btn">
          <px-button type="primary" @click="handleQuery">查询</px-button>
          <px-button @click="resetQuery">重置</px-button>
          <px-button v-has="'ALL_ENERGY_ENERGYREPORT_COST_EXPORT_BTN'" @click="handleExport">导出</px-button>
        </div>
      </px-form>
      <div v-show="activeName === 'C'" class="content">
        <Cost ref="costRef" :queryParams="queryParams" />
      </div>
      <div v-show="activeName === 'U'" class="content">
        <Usage ref="usageRef" :queryParams="queryParams" />
      </div>
    </px-scrollbar>
  </div>
</template>

<script setup>
import { ref, reactive, toRefs, onMounted } from "vue";
import CustomTabs from "@/components/Tabs/index.vue";
import Cost from "./component/cost.vue";
import Usage from "./component/usage.vue";
import dayjs from "dayjs";

defineOptions({
  name: "ALL_ENERGY_ENERGYREPORT_COST"
});

const tabList = ref([
  { name: "C", label: "费用" },
  { name: "U", label: "用量" }
]);
const activeName = ref("C");
const formRef = ref(null);
const costRef = ref(null);
const usageRef = ref(null);

const state = reactive({
  queryParams: {
    year: dayjs().year().toString(),
    area: 1
  },
  areaList: [
    {
      name: "全厂",
      value: 1,
      flag: ""
    },
    {
      name: "创新中心一期",
      value: 2,
      flag: "FAC_83abf9"
    },
    {
      name: "创新中心二期",
      value: 3,
      flag: "FAC_93abf6"
    }
  ]
});
const { queryParams, areaList } = toRefs(state);

onMounted(() => {
  handleFac();
  handleQuery();
});

const areaListCopy = [
  {
    name: "全厂",
    value: 1,
    flag: ""
  },
  {
    name: "创新中心一期",
    value: 2,
    flag: "FAC_83abf9"
  },
  {
    name: "创新中心二期",
    value: 3,
    flag: "FAC_93abf6"
  }
];

// 判断当前用户能看什么权限
const handleFac = () => {
  const facCode = localStorage.getItem("facCode");
  const facList = JSON.parse(localStorage.getItem("facList"));
  // const facList = [
  //   { parentCode: null, code: "FAC_83abf9", name: "创新中心一期" },
  //   { parentCode: null, code: "FAC_93abf6", name: "创新中心二期" }
  // ];
  if (facCode === "FAC_83abf9") {
    // 一期
    state.queryParams.area = 2;
  }
  if (facCode === "FAC_93abf6") {
    // 二期
    state.queryParams.area = 3;
  }
  // 如果为空
  if (facCode === null) {
    state.queryParams.area = "";
  }
  // 过滤出下拉框的项
  if (facList?.length === 1) {
    state.areaList = areaListCopy?.filter(i => {
      return facList?.some(j => j.code === i.flag);
    });
  }
  if (facList?.length === 2) {
    state.areaList = areaListCopy;
  }
  if (facList === null) {
    state.areaList = [];
  }
};

// 切换tab
const handelTabSelected = val => {
  activeName.value = val;
  formRef.value.resetFields();
  handleFac();
  handleQuery();
};

// 查询
const handleQuery = () => {
  if (activeName.value === "C") {
    costRef.value.handleQuery();
  } else {
    usageRef.value.handleQuery();
  }
};

// 重置
const resetQuery = () => {
  formRef.value.resetFields();
  handleFac();
  handleQuery();
};

// 导出
const handleExport = () => {
  if (activeName.value === "C") {
    costRef.value.handleExport();
  } else {
    usageRef.value.handleExport();
  }
};
</script>

<style lang="scss" scoped>
.report-container {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: calc(100vh - 133px);
  padding: 10px 24px;
  background-color: #fff;
  border-radius: 8px;
}

.tab-bar {
  margin-bottom: 8px;
}

.search-form {
  display: flex;
  align-items: center;

  .search-form-btn {
    margin-bottom: 16px;
  }
}

.content {
  width: 100%;
  height: calc(100vh - 295px);
}
</style>
